<template>
<div>
  <Alert>
    任务进度：
    <template slot="desc">
      {{progressInfo.processedCount}} / {{progressInfo.totalCount}}
      <br/> {{progressDesc}}
    </template>
  </Alert>

  <Progress :percent="percent" :status="status"></Progress>
  <ButtonGroup>
    <Button type="primary" @click="start">启动</Button>
    <Button icon="ios-plus-empty" @click="add"></Button>
    <Button icon="ios-minus-empty" @click="minus"></Button>
    <Button type="primary" @click="stop">停止</Button>
  </ButtonGroup>

  <div style="max-height: 100px;overflow-y: auto;">
    信息：
    <Card  v-for="(item, index) in messageList" :key="index" style="margin: 1px 0">
      Content {{ item }}
    </Card>
  </div>


</div>
</template>
<script>
export default {
  data () {
    return {
      progressInfo: {
        progressDesc: '',
        processedCount: 0,
        status: 1,
        totalCount: 0
      },
      messageList: ['sdddddddddd', 'sddddddddd'],
      interval: null
    }
  },
  computed: {
    percent: function () {
      if (this.progressInfo.totalCount === 0) {
        return 0
      }
      return Math.ceil(this.progressInfo.processedCount * 100 / this.progressInfo.totalCount)
    },
    status: function () {
      var status = this.progressInfo.status
      if (status === 1 || status === 0) {
        return 'normal'
      }
      if (status === 2) {
        return 'active'
      }
      if (status === 3) {
        return 'success'
      }
    }
  },
  methods: {
    start () {
      this.progressInfo = {
        totalCount: 100,
        processedCount: 0,
        status: 2,
        progressDesc: '启动了'
      }
      var _this = this
      if (this.interval != null) {
        return
      }
      this.interval = setInterval(function () {
        _this.add()
      }, 1000)
    },
    add () {
      if (this.progressInfo.processedCount >= this.progressInfo.totalCount) {
        this.stop()
        return false
      }
      this.messageList.push('hello,message')
      this.progressInfo.processedCount += 10
    },
    minus () {
      if (this.progressInfo.processedCount <= 0) {
        return false
      }
      this.progressInfo.processedCount -= 10
    },
    stop () {
      if (this.interval) {
        clearInterval(this.interval)
        this.interval = null
      }
      if (this.progressInfo.processedCount >= this.progressInfo.totalCount) {
        this.progressInfo.status = 3
      } else {
        this.progressInfo.status = 1
      }
    }
  }
}
</script>

